<template>
    <div class="fluid">
        <div class="bgContainer">
            <div class="container">
                <ul class="ulOne">
                    <li v-for="(item,index) in one" :key="index" @mouseover="show(index)"  @mouseout="show()">
                        <img :src="item[0]">
                        <!-- 遮罩层背景 -->
                        <div class="ulTwo" v-if="redIndex!=index">                
                                <p>
                                    <img :src="item[1]">
                                </p>
                                <p>
                                    <img :src="item[2]">
                                </p>
                                <p>{{item[3]}}</p>                 
                        </div>
                        <!-- 红色背景 -->
                        <div class="ulThree" v-if="redIndex==index" @click="tapTo(index)">
                            <img :src="item[4]">
                            <p>{{item[5]}}</p>
                            <div>
                                <p>了解更多</p>
                            </div>                  
                        </div>
                    </li>         
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
const img1 = require("../../assets/img/商务合作/1.png")
const img2 = require("../../assets/img/商务合作/2.png")
const img3 = require("../../assets/img/商务合作/3.png")
const img4 = require("../../assets/img/商务合作/4.png")
const img5 = require("../../assets/img/商务合作/5.png")
const img6 = require("../../assets/img/商务合作/6.png")
const img7 = require("../../assets/img/商务合作/7.png")
const img8 = require("../../assets/img/商务合作/8.png")
const img9 = require("../../assets/img/商务合作/9.png")
const img10 = require("../../assets/img/商务合作/10.png")
const img11 = require("../../assets/img/商务合作/11.png")
const img12 = require("../../assets/img/商务合作/12.png")
const img13 = require("../../assets/img/媒体优选/切图/13.png");
export default {
  data() {
    return {
      one: [
        [img1,img5,img13,"大客户服务",img6,"大客户服务"],
        [img2,img7,img13,"代理合作",img8,"代理合作"],
        [img3,img9,img13,"关于我们",img10,"关于我们"],
        [img4,img11,img13,"媒体入驻",img12,"媒体入驻"]
    ],
    redIndex : 2,
    tapToList : ['/bigcustomer', '/agent', '/about', '/mediaIn']
    }
  },
  methods: {
    show(index) {
        this.redIndex = index
    },
    tapTo(index){
        this.$router.push(this.tapToList[index])
    }
  }
}
</script>
<style scoped>
.fluid{
    width:100%;
}
.bgContainer{
    width:100%;
}
.container{
    width:1200px;
    margin:0 auto;
    margin-top: 80px;
    height: 450px;
    margin-bottom: 80px;
}
.ulOne>li {
  width: 25%;
  float: left;
  height: 450px;
  text-align: center;
  position: relative;
}
.ulTwo {
  width: 300px;
  height: 450px;
  opacity: 0.9;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  padding:0 30px;
  width:100%;
  box-sizing: border-box;
}
.ulTwo>p:nth-child(1)>img{
    margin-top: 140px;
}
.ulTwo>p:nth-child(2)>img{
    margin-top: 20px;
}
.ulTwo>p:nth-child(3){
    margin-top: 43px;
    font-size: 30px;
    color:rgb(34, 34, 34);
}
.ulThree {
  width: 300px;
  height: 450px;
  opacity: 0.9;
  background: #ed4040;
  position: absolute;
  top: 0;
  left: 0;
  padding:0 30px;
  width:100%;
  box-sizing: border-box;
  cursor: pointer;
}
.ulThree>img:nth-child(1){
    margin-top: 100px;
}
.ulThree>p:nth-child(2){
    margin-top: 20px;
    font-size: 30px;
    color:#fff;
}
.ulThree>div:nth-child(3){
    width:111px;
    height: 37px;
    background: url("../../assets/img/媒体优选/切图/14.png");
    text-align:center;
    line-height: 37px;
    margin:0 auto ;
    cursor: pointer;
    color:#fff;
    font-size: 16px;
    position: absolute;
    bottom: 50px;
    left:50%;
    margin-left: -56px;
}
</style>